/**
 * 设置语言界面
 */
import React from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Text,
  TouchableHighlight,
  Modal,
  Alert,
  SafeAreaView,
} from 'react-native';
import I18n, {systemLanguage} from 'lang';
//import {Header, MenuItem} from '@components';
import {useDispatch, useSelector} from 'react-redux';
import {selectLangSetting} from 'reduxState/selectors';
import actions from 'reduxState/actions';

const MenuItem = (props: any) => {
  const {centerText, customCenterTextColor, pressFunc} = props;
  return (
    <TouchableOpacity onPress={pressFunc}>
      <Text
        style={{
          color: customCenterTextColor,
        }}>
        {centerText}
      </Text>
    </TouchableOpacity>
  );
};
export type SetLanguageParams = {
  modalVisible: boolean;
  setModalVisible: (arg: boolean) => void;
};
const SetLanguage = (props: SetLanguageParams) => {
  const {modalVisible, setModalVisible} = props;
  const dispatch = useDispatch();
  const userLanguageSetting = useSelector(selectLangSetting);

  const formatLanguageCodeToKey = (languageCode: string) => {
    switch (languageCode) {
      case 'zh':
        return 0;
      case 'en':
        return 1;
      default:
        return 1;
    }
  };

  // 根据当前语言状态，获取对应语言选项key，用绿色区分显示
  let currentLanguageKey = 1; // 默认英文
  if (userLanguageSetting) {
    currentLanguageKey = formatLanguageCodeToKey(userLanguageSetting);
  } else if (systemLanguage) {
    currentLanguageKey = formatLanguageCodeToKey(systemLanguage);
  }

  const updateLanguage = (key: number) => {
    console.log('点击语言', key);

    switch (key) {
      case 0:
        dispatch(actions.setLocale('zh'));
        break;
      case 1:
        dispatch(actions.setLocale('en'));
        break;
    }
  };

  const languageGroups = [
    {key: 0, centerText: '简体中文', pressFunc: updateLanguage},
    {key: 1, centerText: 'English', pressFunc: updateLanguage},
  ];

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
        setModalVisible(!modalVisible);
      }}>
      <SafeAreaView style={styles.container}>
        <Text>{'设置语言界面'}</Text>
        <View style={styles.modalView}>
          {languageGroups.map((languageObj) => {
            const {key, centerText, pressFunc} = languageObj;
            const isCurrentLanguage = currentLanguageKey === key;

            return (
              <MenuItem
                key={key.toString()}
                pressFunc={() => {
                  if (pressFunc) {
                    pressFunc(key);
                  }
                }}
                centerText={centerText}
                customCenterTextColor={
                  isCurrentLanguage ? '#26C283' : '#333333'
                }
              />
            );
          })}
        </View>
        <TouchableHighlight
          style={{...styles.openButton, backgroundColor: '#2196F3'}}
          onPress={() => {
            setModalVisible(!modalVisible);
          }}>
          <Text style={styles.textStyle}>{I18n('hide')}</Text>
        </TouchableHighlight>
      </SafeAreaView>
    </Modal>
  );
};

export default SetLanguage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F3F4F8',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});
